<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局</title>
	<style type="text/css">
	.flex-box{ display: flex; background: blue; width: 300px;}
	.flex-item{ background: yellow; flex-shrink: 1;}
	.flex-item1{ width: 100px; height: 50px; flex-shrink: 2;}
	.flex-item2{ width: 100px; height: 100px; }
	.flex-item3{ width: 100px; height: 80px;}
	.flex-item4{ width: 100px; height: 180px;}
	</style>
</head>
<body>
	<div class="flex-box">
		<div class="flex-item flex-item1">11</div>
		<div class="flex-item flex-item2">22</div>
		<div class="flex-item flex-item3">33</div>
		<div class="flex-item flex-item4">44</div>
	</div>
	<div>flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。</div>
	<div>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。</div>
	<div>四个容器都缩小了,但是第一个缩小得更多</div>
</body>
</html>